// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
@import '../../styles/colors.scss';

.kebab-menu-icon {
    flex-grow: 1; // Center the custom SVG
    padding-left: 9px !important;
    padding-right: 9px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    @media screen and (forced-colors: active) {
        color: buttontext !important;
    }

    &:hover {
        border-style: solid !important;
        border-width: 1px;
        padding-left: 8px !important;
        padding-right: 8px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
}

.kebab-menu-button {
    margin-right: 8px;

    // Since the menu uses a custom SVG, set the button shape:
    width: 32px;
    height: 32px;

    &:hover {
        background-color: $menu-item-background-hover;
    }

    &:global(.is-expanded) {
        background-color: $menu-item-background-active;
    }

    // Add hover and active state:
    &:global(.is-expanded) .kebab-menu-icon,
    &:hover .kebab-menu-icon {
        @media screen and (forced-colors: active) {
            color: highlight;
        }
    }
}
